<template>
  <div>
    <van-tabs v-model="active" color="#3190e8" title-active-color="#3190e8">
      <!-- 商品 -->
      <!-- <van-skeleton title animate :row="3" :loading="loading" v-if="items&&shipinData">
      </van-skeleton> -->
      <van-tab title="商品">
        <!-- 分类选择 -->
        <van-tree-select :items="items" :main-active-index.sync="activeIndex" height="125vw">
          <template #content>
            <FoodData v-for="(item,index) in shipinData" :key="index" :list="item" :index="index" :activeIndex='activeIndex'></FoodData>
          </template>
        </van-tree-select>
        <div class="buy_cart_container" v-show="!show">
          <section class="cart_icon_num" @click="shopping">
            <div class="cart_icon_container" :style="values ===0?'background-color:#535356':'background-color:#4cd964'">
              <span class="cart_list_length" v-if="values!==0">{{values}}</span>
              <van-icon name="shopping-cart" size="1.2rem" color="#fff" />
            </div>
            <div class="cart_num">
              <p v-if="values!==0">¥ {{price}}.00</p>
              <p v-else>¥ 0.00</p>
              <p>配送费¥5</p>
            </div>
          </section>
          <section class="gotopay " :style="values ===0?'background-color: #3d3d3f':'background-color: #3190e8'" @click="settlement(MenuData)">
            <p class="gotopay_button_style" v-if="values!==0">去结算</p>
            <span class="gotopay_button_style" v-else>还差¥20起送</span>

          </section>
        </div>
      </van-tab>

      <!-- 评价 -->
      <van-tab title=" 评价">
        <Evaluation></Evaluation>
      </van-tab>
    </van-tabs>
    <!-- 购物车的菜单栏-->
    <van-action-sheet v-model="showCh" title="购物车" :overlay="false">
      <ul>
        <Menubar v-for="(item,index) in MenuData" :key="index" :price="item.price" :title="item.name" :value="item.quantity" :specs="item.specs[0]"></Menubar>
      </ul>
    </van-action-sheet>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import FoodData from '@/views/Details/FoooData/FoodData.vue'
import Evaluation from '@/views/Details/Evaluation/Evaluation.vue'
import Menubar from '@/views/Details/Menubar/Menubar.vue'
export default {
  components: {
    FoodData,
    Evaluation,
    Menubar
  },
  data() {
    return {
      //Tab标题页切换的索引值
      active: 0,
      // 左侧分类的索相
      activeIndex: 0,
      loading: true
    }
  },
  computed: {
    ...mapState(['shipinData', 'price', 'values', 'show', 'MenuData']),

    showCh: {
      get() {
        return this.$store.state.showCh
      },
      set(val) {
        return (this.$store.state.showCh = val)
      }
    },
    ...mapGetters(['items'])
  },
  methods: {
    //点击显示购物车
    shopping() {
      this.$store.commit('shoppingCart')
    },
    //发起购物车的请求
    settlement(MenuData) {
      this.$store.dispatch('Settlemen', MenuData)
      this.$router.push('/confirmOrder')
    }
  }
  // mounted() {
  //   this.loading = false
  // }
}
</script>

<style lang="less" scoped>
.van-popup--bottom {
  z-index: 9 !important;
  bottom: 50px;
}
.van-tabs__content > .van-tab__pane:nth-of-type(1) {
  flex: 1 !important;
  // height: 125vw;
  padding-bottom: 2rem !important;
}
.van-tree-select__content {
  background-color: #f7f7f7;
}

.buy_cart_container {
  position: fixed;
  background-color: #3d3d3f;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 2rem;
  .cart_icon_num {
    flex: 1;
    // .cart_icon_activity {
    //   background-color: #3190e8;
    // }
    .cart_icon_container {
      display: flex;
      // background-color: #3d3d3f;
      position: absolute;
      padding: 0.4rem;
      border: 0.18rem solid #444;
      border-radius: 50%;
      left: 0.5rem;
      top: -0.7rem;
      .cart_list_length {
        position: absolute;
        top: -0.25rem;
        right: -0.25rem;
        background-color: #ff461d;
        line-height: 0.7rem;
        text-align: center;
        border-radius: 50%;
        border: 0.025rem solid #ff461d;
        min-width: 0.7rem;
        height: 0.7rem;
        font-size: 0.5rem;
        color: #fff;
      }
    }
    .cart_num {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 3.5rem;
      color: #fff;
      p:nth-of-type(1) {
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 0.1rem;
      }
      p:nth-of-type(2) {
        font-size: 0.4rem;
      }
    }
  }
  .gotopay {
    position: absolute;
    right: 0;
    // background-color: #535356;
    width: 5rem;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    .gotopay_button_style {
      font-size: 0.7rem;
      color: #fff;
      font-weight: 700;
    }
  }
}
</style>>